'use client';

import React, { useState } from 'react';
import { Annotation } from './ImageAnnotations';

export interface ViewportState {
    zoom: number;
    pan: { x: number; y: number };
    rotation: number;
    brightness: number;
    contrast: number;
    windowLevel: number;
    windowWidth: number;
}

export interface AnnotationState {
    annotations: Annotation[];
    selectedAnnotation: string | null;
    annotationMode: 'select' | 'draw' | 'measure';
    drawingTool: 'rectangle' | 'circle' | 'polygon' | 'line' | 'arrow';
}

interface ImageControlsProps {
    viewport: ViewportState;
    annotations: AnnotationState;
    isFullscreen: boolean;
    onZoom?: (delta: number) => void;
    onPan?: (deltaX: number, deltaY: number) => void;
    onRotate?: (angle: number) => void;
    onReset?: () => void;
    onBrightnessContrast?: (brightness: number, contrast: number) => void;
    onWindowLevel?: (level: number, width: number) => void;
    onAnnotationModeChange?: (mode: AnnotationState['annotationMode']) => void;
    onDrawingToolChange?: (tool: AnnotationState['drawingTool']) => void;
    onToggleFullscreen?: () => void;
    className?: string;
}

export const ImageControls: React.FC<ImageControlsProps> = ({
    viewport,
    annotations,
    isFullscreen,
    onZoom,
    onPan,
    onRotate,
    onReset,
    onBrightnessContrast,
    onWindowLevel,
    onAnnotationModeChange,
    onDrawingToolChange,
    onToggleFullscreen,
    className = '',
}) => {
    const [showAdvanced, setShowAdvanced] = useState(false);
    const [showAnnotationTools, setShowAnnotationTools] = useState(false);

    return (
        <div className={`bg-white/90 backdrop-blur-sm rounded-lg shadow-lg p-4 ${className}`}>
            {/* Main Controls */}
            <div className="flex items-center gap-2 mb-4">
                {/* Zoom Controls */}
                <div className="flex items-center gap-1 border-r pr-2">
                    <button
                        onClick={() => onZoom?.(-0.2)}
                        className="p-2 hover:bg-gray-100 rounded"
                        title="Zoom Out (-)"
                    >
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 12H4" />
                        </svg>
                    </button>
                    <span className="text-sm font-mono min-w-[60px] text-center">
                        {Math.round(viewport.zoom * 100)}%
                    </span>
                    <button
                        onClick={() => onZoom?.(0.2)}
                        className="p-2 hover:bg-gray-100 rounded"
                        title="Zoom In (+)"
                    >
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
                        </svg>
                    </button>
                </div>

                {/* Pan Controls */}
                <div className="flex items-center gap-1 border-r pr-2">
                    <div className="grid grid-cols-3 gap-1">
                        <div></div>
                        <button
                            onClick={() => onPan?.(0, 20)}
                            className="p-1 hover:bg-gray-100 rounded"
                            title="Pan Up"
                        >
                            <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
                            </svg>
                        </button>
                        <div></div>
                        <button
                            onClick={() => onPan?.(20, 0)}
                            className="p-1 hover:bg-gray-100 rounded"
                            title="Pan Left"
                        >
                            <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                            </svg>
                        </button>
                        <button
                            onClick={() => onReset?.()}
                            className="p-1 hover:bg-gray-100 rounded"
                            title="Reset View (0)"
                        >
                            <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4h16v16H4z" />
                            </svg>
                        </button>
                        <button
                            onClick={() => onPan?.(-20, 0)}
                            className="p-1 hover:bg-gray-100 rounded"
                            title="Pan Right"
                        >
                            <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                            </svg>
                        </button>
                        <div></div>
                        <button
                            onClick={() => onPan?.(0, -20)}
                            className="p-1 hover:bg-gray-100 rounded"
                            title="Pan Down"
                        >
                            <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>
                        <div></div>
                    </div>
                </div>

                {/* Rotation Controls */}
                <div className="flex items-center gap-1 border-r pr-2">
                    <button
                        onClick={() => onRotate?.(-90)}
                        className="p-2 hover:bg-gray-100 rounded"
                        title="Rotate Left"
                    >
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
                        </svg>
                    </button>
                    <span className="text-sm font-mono min-w-[40px] text-center">
                        {viewport.rotation}°
                    </span>
                    <button
                        onClick={() => onRotate?.(90)}
                        className="p-2 hover:bg-gray-100 rounded"
                        title="Rotate Right (R)"
                    >
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 10H11a8 8 0 00-8 8v2m18-10l-6 6m6-6l-6-6" />
                        </svg>
                    </button>
                </div>

                {/* Annotation Mode */}
                <div className="flex items-center gap-1 border-r pr-2">
                    <button
                        onClick={() => onAnnotationModeChange?.('select')}
                        className={`p-2 rounded ${annotations.annotationMode === 'select' ? 'bg-blue-100 text-blue-600' : 'hover:bg-gray-100'}`}
                        title="Select Mode"
                    >
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
                        </svg>
                    </button>
                    <button
                        onClick={() => {
                            onAnnotationModeChange?.('draw');
                            setShowAnnotationTools(!showAnnotationTools);
                        }}
                        className={`p-2 rounded ${annotations.annotationMode === 'draw' ? 'bg-blue-100 text-blue-600' : 'hover:bg-gray-100'}`}
                        title="Draw Mode"
                    >
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                        </svg>
                    </button>
                    <button
                        onClick={() => onAnnotationModeChange?.('measure')}
                        className={`p-2 rounded ${annotations.annotationMode === 'measure' ? 'bg-blue-100 text-blue-600' : 'hover:bg-gray-100'}`}
                        title="Measure Mode"
                    >
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                        </svg>
                    </button>
                </div>

                {/* Advanced Controls Toggle */}
                <button
                    onClick={() => setShowAdvanced(!showAdvanced)}
                    className={`p-2 rounded ${showAdvanced ? 'bg-blue-100 text-blue-600' : 'hover:bg-gray-100'}`}
                    title="Advanced Controls"
                >
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4" />
                    </svg>
                </button>

                {/* Fullscreen Toggle */}
                <button
                    onClick={onToggleFullscreen}
                    className="p-2 hover:bg-gray-100 rounded"
                    title="Toggle Fullscreen (F)"
                >
                    {isFullscreen ? (
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 9V4.5M9 9H4.5M9 9L3.5 3.5M15 9h4.5M15 9V4.5M15 9l5.5-5.5M9 15v4.5M9 15H4.5M9 15l-5.5 5.5M15 15h4.5M15 15v4.5m0-4.5l5.5 5.5" />
                        </svg>
                    ) : (
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
                        </svg>
                    )}
                </button>
            </div>

            {/* Drawing Tools */}
            {showAnnotationTools && annotations.annotationMode === 'draw' && (
                <div className="mb-4 p-3 bg-gray-50 rounded-lg">
                    <h4 className="text-sm font-medium mb-2">Drawing Tools</h4>
                    <div className="flex gap-2">
                        {[
                            { tool: 'rectangle', icon: '⬜', label: 'Rectangle' },
                            { tool: 'circle', icon: '⭕', label: 'Circle' },
                            { tool: 'polygon', icon: '🔷', label: 'Polygon' },
                            { tool: 'line', icon: '📏', label: 'Line' },
                            { tool: 'arrow', icon: '➡️', label: 'Arrow' },
                        ].map(({ tool, icon, label }) => (
                            <button
                                key={tool}
                                onClick={() => onDrawingToolChange?.(tool as AnnotationState['drawingTool'])}
                                className={`px-3 py-2 text-sm rounded ${annotations.drawingTool === tool
                                    ? 'bg-blue-100 text-blue-600 border-blue-300'
                                    : 'bg-white hover:bg-gray-50 border-gray-300'
                                    } border`}
                                title={label}
                            >
                                <span className="mr-1">{icon}</span>
                                {label}
                            </button>
                        ))}
                    </div>
                </div>
            )}

            {/* Advanced Controls */}
            {showAdvanced && (
                <div className="space-y-4 p-3 bg-gray-50 rounded-lg">
                    <h4 className="text-sm font-medium">Advanced Controls</h4>

                    {/* Brightness & Contrast */}
                    <div className="grid grid-cols-2 gap-4">
                        <div>
                            <label className="block text-xs text-gray-600 mb-1">Brightness</label>
                            <input
                                type="range"
                                min="-100"
                                max="100"
                                value={viewport.brightness}
                                onChange={(e) => onBrightnessContrast?.(Number(e.target.value), viewport.contrast)}
                                className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
                            />
                            <span className="text-xs text-gray-500">{viewport.brightness}%</span>
                        </div>
                        <div>
                            <label className="block text-xs text-gray-600 mb-1">Contrast</label>
                            <input
                                type="range"
                                min="-100"
                                max="100"
                                value={viewport.contrast}
                                onChange={(e) => onBrightnessContrast?.(viewport.brightness, Number(e.target.value))}
                                className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
                            />
                            <span className="text-xs text-gray-500">{viewport.contrast}%</span>
                        </div>
                    </div>

                    {/* Window Level & Width */}
                    <div className="grid grid-cols-2 gap-4">
                        <div>
                            <label className="block text-xs text-gray-600 mb-1">Window Level</label>
                            <input
                                type="range"
                                min="0"
                                max="255"
                                value={viewport.windowLevel}
                                onChange={(e) => onWindowLevel?.(Number(e.target.value), viewport.windowWidth)}
                                className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
                            />
                            <span className="text-xs text-gray-500">{viewport.windowLevel}</span>
                        </div>
                        <div>
                            <label className="block text-xs text-gray-600 mb-1">Window Width</label>
                            <input
                                type="range"
                                min="1"
                                max="512"
                                value={viewport.windowWidth}
                                onChange={(e) => onWindowLevel?.(viewport.windowLevel, Number(e.target.value))}
                                className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
                            />
                            <span className="text-xs text-gray-500">{viewport.windowWidth}</span>
                        </div>
                    </div>

                    {/* Reset Button */}
                    <button
                        onClick={onReset}
                        className="w-full px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded text-sm font-medium"
                    >
                        Reset All Settings
                    </button>
                </div>
            )}
        </div>
    );
};

export default ImageControls;